<template>
  <a-modal
    :visible="visible"
    okText="确定"
    cancelText="取消"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="false"
    width="65%"
    @cancel="closeModal()"
    @ok="handleSubmit">
    <!-- 弹窗内容 -->
    <a-row>
      <!-- 选择 -->
      <a-col :span="4">
        <a-radio-group v-model="typeVal" @change="typeChange">
          <a-radio :style="radioStyle" :value="1">商品</a-radio>
        </a-radio-group>
      </a-col>
      <a-col :span="20">
        <search-table
          :url="url"
          :headParams="headParams"
          ref="searchtable"
          :columns="columns"
          :form="form"
          tableSelectType="radio"
          :disabledKey="'chooseStatus'"
          @selectedRowChange="handleSelectRowSelect">
          <!-- 搜索条件 -->
          <template slot="searchForm">
            <a-form layout="inline" :form="form">
              <a-form-item label="商品名称">
                <a-input allowClear v-decorator="['goodsName']" placeholder="请输入商品名称"></a-input>
              </a-form-item>
              <a-form-item label="商品分组">
                <a-tree-select
                  allowClear
                  style="width:200px"
                  :replaceFields="{children:'children', title:'groupName', key:'id', value: 'id' }"
                  v-decorator="['goodsGroupId']"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="commodityGroupList"
                  placeholder="请选择"
                  tree-default-expand-all>
                  <span slot="title" slot-scope="{ value }">
                    {{ value }}
                  </span>
                </a-tree-select>
              </a-form-item>
            </a-form>
          </template>
        </search-table>
      </a-col>
    </a-row>
    <!-- 弹窗按钮 -->
    <template slot="footer">
      <a-button key="back" @click="closeModal"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false, // 是否显示弹窗
      title: '选择商品', // 弹窗标题
      typeVal: 1, // 分类
      radioStyle: { // 单选样式
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      url: '/group/activity/goods/page', // 列表接口地址
      headParams: { baseURL: `${location.origin}/goldenhome/ghgroup/admin` }, // 接口域名
      form: this.$form.createForm(this, { name: "table_search" }), // 搜索条件
      columns: [
        {
          title: "商品名称",
          dataIndex: "goodsName",
          key: "goodsName",
          align: 'center',
          customRender: (text, row) => {
            let imgSrc = row.goodsPictures.split(',')[0]
            return <div class="product_td"><table-img src={imgSrc}/><div class="product_name">{text}</div></div>
          }
        },
        {
          title: "商品分组",
          dataIndex: "goodsGroupName",
          key: "goodsGroupName",
        },
        {
          title: "库存",
          dataIndex: "goodsInventoryTotal",
          key: "goodsInventoryTotal",
        },
        {
          title: "累计净销量",
          dataIndex: "realSales",
          key: "realSales",
        },
        {
          title: "不可选原因",
          dataIndex: "bkxyy",
          key: "bkxyy",
          customRender: (text, row) => {
            return row.chooseStatus == 0 ? row.cannotChooseReason || '-' : '-'
          }
        },
      ],
      commodityGroupList: [], // 商品分组集合
      goodsInfo: {} // 商品信息
    };
  },
  computed: {
    userInfo(){ // 用户信息
      return this.$store.getters.userInfo || {};
    },
    shopId(){ // 店铺id
      return this.userInfo.shopId || '';
    },
  },
  created() {
    this.getProductGroup();
  },
  mounted() {},
  methods: {
    //获取商品分组
    async getProductGroup(){
      let res=await this.$get('/goods/group/tree',{
        shopId:this.userInfo.shopId || ''
      });
      if(res && res.returnCode=='1000'){
        this.commodityGroupList=res.dataInfo || [];
      }
      else {
        this.commodityGroupList=[];
      }
    },
    // 分类切换
    typeChange(val) {},
    // 选择商品
    handleSelectRowSelect(record) {
      if(record[0]){
        this.goodsInfo = record[0]
      }
    },
    // 关闭弹窗
    closeModal() {
      this.visible = false;
    },
    // 提交表单
    handleSubmit() {
      if(this.goodsInfo.id) {
        if(!this.goodsInfo.chooseStatus) {
          return this.$message.error('该商品不可选择')
        } else {
          this.visible = false;
          this.$emit('getGoodsId', this.goodsInfo);
        }
      } else {
        this.$confirm({
          title: '关闭确认',
          content: '还未选择商品，确认要关闭选择窗口吗？',
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            this.closeModal()
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.product_td{
  display: flex;
  align-items: center;
  .product_name{
    margin-left:6px;
  }
}
</style>
